<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8"/>
    <title>地图打印（导出图片）</title>
    <link href="./ol.css" rel="stylesheet" type="text/css"/>
    <style type="text/css">
        #map {
            width: 100%;
            /* height:570px; */
            height: 100%;
            position: fixed;
        }

        #menu {
            float: left;
            position: absolute;
            bottom: 10px;
            z-index: 2;
        }

        #wrap2 {
            width: 100%;
            height: 100%;
            position: absolute;
            left: 0;
            top: 0;
            background-color: lightgray;
            opacity: 0.8;
            display: none;
            z-index: 9;
        }
    </style>
</head>

<script src="./js/ol-debug.js" type="text/javascript"></script>
<script src="./js/jquery.min.3.2.1.js" type="text/javascript"></script>
<script src="./js/FileSaver.js"></script>


<body>
<div>
    <div id="map">
        <div id="menu">
            <a id="export-png" class="btn" download="map.png"><i class="icon-download">地图导出(暂支持非IE内核浏览器)</i></a>
            <p>
                <a id="manypng" class="btn" download="map.png"><i class="icon-download"> Download many</i></a>
                <!-- <a id="image-download2" ></a> -->
            </p>
        </div>
    </div>
</div>
<script type="text/javascript">
    //实例化Map对象加载地图
    var map = new ol.Map({
        target: 'map', //地图容器div的ID
        //地图容器中加载的图层
        layers: [
            //加载瓦片图层数据（OSM）
            new ol.layer.Tile({
                source: new ol.source.OSM()
            })
        ],
        //地图视图设置
        view: new ol.View({
            center: [12950000, 4860000], //地图初始中心点
            zoom: 8, //地图初始显示级别
            minZoom: 6, //最小级别
            maxZoom: 12 //最大级别
        })
    });

    var exportPNGElement = document.getElementById('export-png'); //导出图片功能项
    var manypng = document.getElementById('manypng'); //导出图片功能项

    if ('download' in exportPNGElement) {
        exportPNGElement.addEventListener('click', function (e) {
            map.once('postcompose', function (event) {
                debugger
                var canvas = event.context.canvas; //地图渲染容器
                exportPNGElement.href = canvas.toDataURL('image/png'); //导出图片
            });
            map.renderSync();
        }, false);
    } else {
        alert("浏览器不支持此导出地图图片功能！");
    }

    if ('download' in manypng) {
        manypng.addEventListener('click', function (e) {
            //  map.removeInteraction(draw);
            addInteraction();
            debugger
            map.renderSync();
        }, false)
    }


    var draw; // global so we can remove it later
    var source = new ol.source.Vector();

    function addInteraction() {
        debugger
        draw = new ol.interaction.Draw({
            source: source,
            type: 'LineString',
            style: new ol.style.Style({
                fill: new ol.style.Fill({
                    color: 'rgba(255, 255, 255, 0.2)'
                }),
                stroke: new ol.style.Stroke({
                    color: '#ffcc33',
                    width: 2
                }),
                image: new ol.style.Circle({
                    radius: 7,
                    fill: new ol.style.Fill({
                        color: '#ffcc33'
                    })
                })
            }),
            maxPoints: 2,
            geometryFunction: ol.interaction.Draw.createBox()//矩形框
        })
        map.addInteraction(draw);

        // map.values_.target='map2';
        function getXDis(e, number) {
            var min = undefined;
            var max = undefined;
            e.forEach(element => {
                if (min == undefined || element[number] < min) {
                    min = element[number];
                }
                if (max == undefined || element[number] > max) {
                    max = element[number];
                }
            });
            return [min + 2, max - min - 4];
        }

        var extent = [];
        draw.on('drawend', function (evt) {
            var feature = evt.feature;
            console.log(feature);
            var ftarget = evt.target.a;
            var geometry = feature.getGeometry();
            var ext = geometry.getExtent();
            map.removeInteraction(draw);
            var r = map.getView().getResolutionForExtent(ext, map.getSize());//根据范围获取分辨率
            map.getView().setResolution(r);
            map.getView().setZoom(12);
            debugger
            var centerone = ol.extent.getCenter(ext);
            map.getView().setCenter(centerone);
            var canvas;
            var imageData;
            var canvas2;
            var coordinate = geometry.getCoordinates();
            map.once("postrender", function (e) {
                extent[0] = e.target.getPixelFromCoordinate(coordinate[0][0]);//转画布坐标
                extent[1] = e.target.getPixelFromCoordinate(coordinate[0][1]);
                extent[2] = e.target.getPixelFromCoordinate(coordinate[0][2]);
                extent[3] = e.target.getPixelFromCoordinate(coordinate[0][3]);
                var x_dx = getXDis(extent, 0);
                debugger
                var y_dy = getXDis(extent, 1);
                map.once("postcompose", function (event) {
                    debugger
                    canvas = event.context.canvas;
                    var ctx2 = canvas.getContext("2d");
                    imageData = ctx2.getImageData(x_dx[0], y_dy[0], x_dx[1], y_dy[1]);
                    var c = document.getElementById("map");
                    c.style.width = imageData.width + 'px';
                    c.style.height = imageData.height + 'px';
                    map.updateSize();//容器改变重新加载地图
                })
                map.once('rendercomplete', function () {//渲染完成
                    canvas.toBlob(function (blob) {
                        saveAs(blob, 'map.png');
                        debugger
                        $('#map').css({
                            width: "100%",
                            height: "100%"
                        })
                        map.updateSize();//容器改变重新加载地图
                    });
                });
            })
        });
    }
</script>
</body>
</html>